<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <style type="text/css">
        #app {
            width: 600px;
            margin: 100px auto;
        }
        .demo-vm-1, .demo-vm-2, .demo-vm-3, .demo-vm-4 {
            display: block;
            box-sizing: border-box;
            margin: 8px;
            padding: 8px;
        }
        .demo-vm-1 {
            box-shadow: 0 0 2px #444444;
        }
        .demo-vm-2 {
            box-shadow: 0 0 2px #888888;
            color: #888888;
        }
        .demo-vm-3 {
            box-shadow: 0 0 2px #bbbbbb;
            color: #bbbbbb;
        }
        .demo-vm-4 {
            box-shadow: 0 0 2px darkgreen;
            color: darkgreen;
        }
    </style>
</head>
<body>
    <div id="app" class="demo-vm-1">
        <p>message: {{ message }}</p>
        <p>result: {{ result }}</p>
        <p>
            <input v-model="num1" type="number">
            <span>+</span>
            <input v-model="num2" type="number">
        </p>
        <div>修改次数：{{ changeCount }}</div>
        <br />
        <button @click="buttonClick">点我</button>
        <br />
        <br />
        <demo-vm-four></demo-vm-four>
        <br />
        <br />
        <demo-vm-two v-bind:result="result" @click="demoTwoClick" @change-watch="demoTwoChange">
            <div class="slot-1" slot="slot1"></div>
            <div class="slot-default"></div>
        </demo-vm-two>
    </div>
<script>

    const DemoVmFour = {
        template: "<div class='demo-vm-4'>" +
            "<h2>Demo VM 4</h2>" +
            "</div>",
        name: "DemoVmFour",
        created() {
            console.log("demoFour:", "demoFour created");
        },
        mounted() {
            console.log("demoFour:  demoFour mounted");
        },
        beforeDestroy() {
            console.log("demoFour:  demoFour beforeDestroy");
        },
        destroyed() {
            console.log("demoFour:  demoFour destroyed");
        }
    }

    const DemoVmThree = Vue.component("demo-vm-three", {
        template: "<div class='demo-vm-3'>" +
            "<h2>Demo VM 3</h2>" +
            "</div>",
        name: "DemoVmThree",
        created() {
            console.log("demoThree:", "demoThree created");
        },
        mounted() {
            console.log("demoThree:  demoThree mounted");
        },
        beforeDestroy() {
            console.log("demoThree:  demoThree beforeDestroy");
        },
        destroyed() {
            console.log("demoThree:  demoThree destroyed");
        },
    })

    const DemoVmTwo = Vue.component("demo-vm-two", {
        template: "<div class='demo-vm-2'>" +
            "<h2>Demo VM 2</h2>" +
            "<p>demo2 data is: {{ data2 }}</p>" +
            "<p>demo2 props data is: {{ result }}</p>" +
            "<span>test span</span>" +
            "<button @click='demoClick2'>button2</button>" +
            "<br />" +
            "<input :value='changeMessage' />" +
            "<slot name='slot1'></slot>" +
            "<slot></slot>" +
            "<demo-vm-three></demo-vm-three>" +
            "<demo-vm-four></demo-vm-four>" +
            "</div>",
        name: "DemoVmTwo",
        components: { "demo-vm-three": DemoVmThree, "demo-vm-four": DemoVmFour },
        props: {
            result: [String, Number]
        },
        data() {
            return{
                data2: "我是 demo2 的数据",
                clickEventNum: 0
            }
        },
        created() {
            console.log("demoTwo:", "demoTwo created", this.result);
        },
        mounted() {
            console.log("demoTwo:  demoTwo mounted");
        },
        beforeDestroy() {
            console.log("demoTwo:  demoTwo beforeDestroy");
        },
        destroyed() {
            console.log("demoTwo:  demoTwo destroyed");
        },
        methods: {
            demoClick2() {
                this.data2 = "我是 demo2 修改后的数据";
                this.clickEventNum ++;
                this.$emit("click", this.clickEventNum);
            }
        },
        computed: {
            changeMessage() {
                return `已经点击了 ${this.clickEventNum} 次，最后一次点击时间是：${ new Date().toLocaleString()}`;
            }
        },
        watch: {
            clickEventNum() {
                console.log("demoTwo:", "click:", this.clickEventNum, "time", new Date().toLocaleString());
                this.$emit("change-watch");
            }
        }
    })


    const DemoVmOne = new Vue({
        el: "#app",
        data: {
            message: "hello world",
            num1: 0,
            num2: 0,
            changeCount: 0
        },
        components: { "demo-vm-two": DemoVmTwo, "demo-vm-four": DemoVmFour },
        computed: {
            result() {
                return Number(this.num1) + Number(this.num2);
            }
        },
        watch: {
            result: function () {
                this.changeCount += 1;
            }
        },
        created() {
            console.log("demoOne:  demoOne created");
        },
        mounted() {
            console.log("demoOne:  demoOne mounted");
        },
        beforeDestroy() {
            console.log("demoOne:  demoOne beforeDestroy");
        },
        destroyed() {
            console.log("demoOne:  demoOne destroyed");
        },
        methods: {
            buttonClick() {
                alert("buttonClick");
            },
            demoTwoClick(num) {
                console.log("demoOne: demoTwoClick emits, ", num);
            },
            demoTwoChange() {
                console.log("demoOne: demoTwoWatch emits");
            }
        }
    })

    console.log(DemoVmOne);
    console.log(DemoVmTwo);
    console.log(DemoVmThree);
    console.log(DemoVmFour);

</script>
</body>
</html>
